<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/reset.css" />
  </head>
  <body>
    <div class="j2">
      <div class="j8">
        <input type="checkbox" onchange="allSelectFn(this)" class="k1" />
        <span>全选</span>
        <span id="price-span" class="j9"></span>
      </div>

      <span class="j3">商品名称</span>
      <span class="j4">单价</span>
      <span class="j5">数量</span>
      <span class="j6">小计</span>
      <span class="j7">操作</span>
    </div>
    <ul id="cart-list" class="j1">
      <!-- <li>
            <h2></h2>
            <img src="" alt="">
            <p></p>
            <input type="number">
             <span class="m7"></span>
            <button>删除</button>
            
        </li> -->
    </ul>
    <script>
      //购物车列表
      async function loadCartList() {
        let url = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let id = localStorage.getItem("uid");
        let r = await axios.get(url, { params: { id } });
        console.log(r.data);
        let resArr = r.data.data.map(
          (v) =>
            `
            <li>
                
                <input type="checkbox" onchange="singleIptChange(this)" class="singleIpt" id="m2"> 
                
                <img src="${v.pimg}" alt="" class="m3">
                 <p class="m4">${v.pname}</p>
             <p class="price" id="m5">${v.pprice}</p>
            <input class="pnum" id="m6" type="number" value="${v.pnum}" min="1"  onchange="cartClick(${v.pid},this)">
            <span class="m7"></span>
             <button class="m8" onclick="delFN(${v.pid},this)">×</button>
            </li>
             `
        );
        document.querySelector("#cart-list").innerHTML = resArr.join("");
      }
      loadCartList();
      //删除
      async function delFN(pid, btn) {
        let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
        let uid = localStorage.getItem("uid");
        let r = await axios.get(url, { params: { uid, pid } });
        console.log(r.data);
        console.log(btn);
        btn.parentNode.remove();
      }
      //3修改购物车商品的数据
      async function cartClick(pid, ipt) {
        console.log(pid);
        console.log(ipt);
        let uid = localStorage.getItem("uid");
        let pnum = ipt.value;
        let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
        let r = await axios.get(url, { params: { pid, uid, pnum } });
        console.log(r.data);
      }
      //全选
      function allSelectFn(allSelIpt) {
        console.log(allSelIpt.checked);
        //获取所有 单选 singleIpt
        let singleIptArr = document.querySelectorAll(".singleIpt");
        console.log(singleIptArr);
        //将所有的单选的checked改成 全选ipt一样
        singleIptArr.forEach((v) => (v.checked = allSelIpt.checked));
        //price-span 价格
        let priceSpan = document.querySelector("#price-span");
        if (allSelIpt.checked == false) {
          priceSpan.innerHTML = 0;
        } else {
          //获取每一行的 商品的数量和单价相乘，再每一行的计算的 价格相加
          console.log(singleIptArr);
          let countPrice = 0;
          singleIptArr.forEach((ipt) => {
            let li = ipt.parentNode;
            //checkbox所在这一行的父元素
            //算出每一行的总价
            let price = li.querySelector(".price").innerHTML;
            let pnum = li.querySelector(".pnum").value;
            console.log(price * pnum);
            //每一行的总价相加
            countPrice += price * pnum;
          });
          priceSpan.innerHTML = countPrice;
        }
      }
      function singleIptChange(ipt) {
        //  let xj =document.querySelector(")
        // console.log(ipt);
        let xj = ipt.parentNode.querySelector(".m7");
        // console.log(span);
        //获取所有 单选 singleIpt
        let singleIptArr = document.querySelectorAll(".singleIpt");
        let countPrice = 0;
        singleIptArr.forEach((ipt) => {
          if (ipt.checked == true) {
            let li = ipt.parentNode;
            let price = li.querySelector(".price").innerHTML;
            let pnum = li.querySelector(".pnum").value;
            console.log(price * pnum);
            countPrice += price * pnum;
          }
        });
        xj.innerHTML = countPrice;
      }
    </script>
  </body>
</html>
